<template>
    <div>
        <div class="header">
            <div class="title">
                <template v-if="data.title?.length == 1">{{ data.title[0] }}</template>
                <template v-else>
                    <span v-for="(item, idx) in data.title" :key="idx">{{ item + ' ' }}</span>
                </template>
            </div>
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item :to="{ name: 'cmsIndex' }">{{ $t('Home') }}</el-breadcrumb-item>
                <el-breadcrumb-item :to="infoBreadcrumbTo(item)" v-for="(item, idx) in data.breadcrumb" :key="idx">
                    {{ item.name }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row :gutter="15">
            <el-col :lg="18">
                <el-card v-if="!isEmpty(data.filterConfig)" class="filter-card" shadow="never">
                    <div class="filter-box">
                        <div class="filter-item" v-for="(item, idx) in data.filterConfig" :key="idx">
                            <div class="label">{{ item.title }}</div>
                            <el-radio-group @change="onFilterChange" v-model="state.filter[item.name]">
                                <el-radio v-for="(dict, index) in item.frontend_filter_dict" :key="index" :label="index" border>
                                    {{ dict }}
                                </el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </el-card>
                <el-card class="article-card" shadow="never">
                    <template #header>
                        <div class="order">
                            <span @click="onOrder('weigh')" :class="state.order == 'weigh' ? 'active' : ''">默认</span>
                            <span @click="onOrder('views')" :class="state.order == 'views' ? 'active' : ''">浏览量</span>
                            <span @click="onOrder('publish_time')" :class="state.order == 'publish_time' ? 'active' : ''">发布时间</span>
                        </div>
                    </template>
                    <div>
                        <div v-if="props.data.list?.length">
                            <CmsDoubleColumnCard :article-list="props.data.list" />
                            <div class="load-list">
                                <el-pagination
                                    @current-change="onCurrentChange"
                                    background
                                    :default-page-size="state.limit"
                                    layout="prev, pager, next, jumper, total"
                                    :total="data.total"
                                />
                            </div>
                        </div>
                        <el-empty v-else description="无数据" />
                    </div>
                </el-card>
            </el-col>
            <el-col :lg="6">
                <CmsRightSideBar />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash-es'

interface Props {
    data: ArticleListData
    params: anyObj
}
const props = withDefaults(defineProps<Props>(), {
    data: () => {
        return {}
    },
    params: () => {
        return {}
    },
})

const state: {
    order: string
    sort: string
    limit: number
    filter: anyObj
} = reactive({
    order: 'weigh',
    sort: 'desc',
    limit: 16,
    filter: {},
})

const emits = defineEmits<{
    (e: 'reload', params: anyObj): void
}>()

const onOrder = (order: string) => {
    if (state.order == order) {
        state.sort = state.sort == 'desc' ? 'asc' : 'desc'
    }
    state.order = order
    const orderStr = order + ',' + state.sort
    emits('reload', { ...props.params, order: orderStr, page: 1, limit: state.limit, filter: state.filter })
}

const onCurrentChange = (val: number) => {
    const orderStr = state.order + ',' + state.sort
    emits('reload', { ...props.params, order: orderStr, page: val, limit: state.limit, filter: state.filter })
}

const onFilterChange = () => {
    let filter: string[] = []
    for (const key in state.filter) {
        filter[key as any] = state.filter[key]
    }
    const orderStr = state.order + ',' + state.sort
    emits('reload', { ...props.params, order: orderStr, page: 1, limit: state.limit, filter: filter })
}
</script>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
        font-size: var(--el-font-size-large);
        font-weight: bold;
        color: var(--el-text-color-primary);
        padding: 20px 10px;
    }
    .breadcrumb {
        padding: 0 10px;
    }
}
.filter-card {
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    :deep(.el-card__body) {
        padding: 10px 15px;
    }
    .filter-item {
        display: flex;
        align-items: center;
        .label {
            font-size: var(--el-font-size-medium);
            margin-right: 10px;
            min-width: 60px;
        }
        :deep(.el-radio) {
            margin: 6px;
        }
        :deep(.el-radio__inner) {
            display: none;
        }
    }
    .filter-item:last-child {
        margin-bottom: 0;
    }
}
.article-card {
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    :deep(.el-card__header) {
        padding: 15px;
        border-bottom: 1px solid var(--el-border-color-extra-light);
    }
    :deep(.el-card__body) {
        padding: 0 15px;
    }
}
.order {
    span {
        padding-right: 10px;
        cursor: pointer;
        color: var(--el-text-color-primary);
        &:hover {
            color: var(--el-color-primary);
            text-decoration: underline;
        }
    }
    span.active {
        color: var(--el-color-primary);
    }
}
.load-list {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
